@mixin radio($color){
  input{
    &:checked{
      & ~ i{
        border-color:$color;
        &::after{
          background-color: $color;
        }
        & ~ span{
          color: $color;
        }
      }
      &:disabled{
        & ~ i{
          border-color:mix($color,$white);
          &::after{
            background-color: mix($color,$white);
          }
        }
        & ~ span{
          color:mix($color,$white);
        }
      }
    }
  }
  &.x-checkbox{
    input{
      &:checked{
        & ~ i{
          background-color: $color;
        }
      }
    }
  }
}



.x-radio{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  padding:0 3px;
  span{
    color: #999;
    font-size: 13px;
  }
  input{
    position: absolute;
    opacity: 0;
    & ~ i{
      display: inline-block;
      width: 16px;
      height:16px;
      border-radius: 50%;
      border:1px solid #ccc;
      vertical-align: -3px;
      pd:1px;
      mr:3px;
    }
    &:checked{
      & ~ i{
        border:2px solid $primary;
        position: relative;
        pd:0;
        &::after{
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: $primary;
          transform: translate(-50%,-50%);
        }
        & ~ span{
          color: $primary;
        }
      }
      &:disabled{
        & ~ i{
          border-color:mix($primary,$white);
          &::after{
            background-color: mix($primary,$white);
          }
        }
        & ~ span{
          color:mix($primary,$white);
        }
      }
    }
    &:disabled{
      & ~ i{
        bdc:mix(#ccc,$white);
      }
      & ~ span{
        color:mix(#ccc,$white);
      }
    }
  }
/*   &:disabled{
        & ~ i{
          border-color:mix(color,$white);
          &::after{
            background-color: $color;
          }
        }
        & ~ span{
          color:mix($color,$white);
        }
      } */
  &.primary{
    @include radio($primary)
  }
  &.success{
    @include radio($success)
  }
  &.warning{
    @include radio($warning)
  }
  &.danger{
    @include radio($danger)
  }
}
  
  